<template>
   <breadcrumb></breadcrumb>
   <div class="right-list">
      <el-table :data="tableData"  style="width: 100%" border stripe >
         <el-table-column type="index" label="序号" width="60" />
         <el-table-column prop="authName" label="权限名称" />
         <el-table-column prop="path" label="路径" />
         <el-table-column prop="level" label="权限等级">
            <template #default="scope">
               <el-tag v-if="scope.row.level==='0'" size="large">
                  一级
               </el-tag>
               <el-tag v-else-if="scope.row.level==='1'" type="success" size="large">
                  二级
               </el-tag>
               <el-tag v-else="scope.row.level==='2'" type="warning" size="large">
                  三级
               </el-tag>
               <!-- <div>{{scope.row}}</div> -->
               </template>
         </el-table-column>
      </el-table>
   </div>
  
</template>

<script  setup>
import { onMounted, ref } from 'vue';
import { getRightsList } from '../../apis/right';

const tableData = ref([])

const getList = () => {
   getRightsList().then((res) => {
      tableData.value=res.data
   })
}
onMounted(() => { getList() })


</script>

<style scoped lang="scss">
.right-list{
   padding: 20px;
   box-sizing: border-box;
   .el-table{
      font-size: 12px;
   }
}
</style>





